<template>
  <div class="outer-div">
    <div>
      <span style="font-size: 50px;color: #2C3B52">系统监控</span>
    </div>
    <div class="down-div">
      <Form ref="userinfo" :model="userinfo" :rules="ruleInline" >
        <FormItem prop="user">
          <Input type="text" v-model="userinfo.username" placeholder="username" size="large" style="width: 300px;">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="userinfo.password" @keyup.enter.native="handleSubmit" placeholder="Password" size="large" style="width: 300px;">
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
<!--        <Row>-->
<!--           <Col span="12">-->
<!--             <FormItem prop="verificationCode">-->
<!--               <Input type="text" v-model="userinfo.verificationCode" @keyup.enter.native="handleSubmit" placeholder="验证码" size="large" style="width: 150px;"/>-->
<!--             </FormItem>-->
<!--           </Col>-->
<!--          <Col span="12">-->
<!--            <img :src="verificationImg" style="width: 130px;height: 45px" @click="getVerification">-->
<!--           </Col>-->
<!--        </Row>-->
        <FormItem>
          <Row>
            <Col span="17">
              <Button type="primary" @click="handleSubmit" size="large" style="width: 200px">登录</Button>
            </Col>
            <Col span="7">
              <Checkbox v-model="userinfo.rememberMe">记住我？</Checkbox>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  import {setToken} from "../utils/auth";
  import {login,verificationCode} from "../api/sys/system/sysUser";
  import {mapMutations} from 'vuex';

  export default {
    data () {
      return {
        verificationImg : '',
        userinfo: {
          username: '',
          password: '',
          verificationKey : '',
          verificationCode : '',
          rememberMe : false,
        },
        ruleInline: {
          username: [
            { required: true, message: '请填写用户名！', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空！', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码最少为六位！', trigger: 'blur' }
          ],
          // verificationCode: [
          //   { required: true, message: '验证码不能为空！', trigger: 'blur' },
          //   { type: 'string', min: 4, message: '验证码最少为四位！', trigger: 'blur' }
          // ]
        }
      }
    },
    mounted(){
      document.body.style.backgroundColor = '#2C3B52'
      //获取验证码
      // this.getVerification();
    },
    methods: {
      ...mapMutations(["setCurrentUser"]),
      handleSubmit() {
        var thiz = this;
        this.$refs['userinfo'].validate((valid) => {
          if(!valid){
            return;
          }
          login(thiz.userinfo).then(
            data=>{
              if(data.code == 200 && data.data){
                setToken(new Date().getTime(),this.userinfo.rememberMe);
                this.setCurrentUser(data.data);
                thiz.$router.push("/sys");
              }
            },error =>{
              // this.getVerification();
            });
        })
      },
      // /**
      //  * 获取验证码
      //  */
      // getVerification(){
      //   verificationCode().then(result =>{
      //     var data  = result.data;
      //     this.userinfo.verificationKey = data.key;
      //     this.verificationImg =  'data:image/png;base64,' + data.image;
      //   });
      // }
    }
  }
</script>

<style scoped>
.outer-div{
   text-align: center;
   width: 500px;
   height: 350px;
   margin: 15% auto;
   color: black;
  background-color: #FFFFFF;
  border-radius:5px;
 }
.down-div{
  width: 300px;
  height: 158px;
  margin: 9% auto;
  color: black;
}
</style>
